<%--
  Created by IntelliJ IDEA.
  User: cos
  Date: 2022/9/29
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="/emp/doLogin" method="post">
    用户名: <input type="text" name="username"/> <br>
    密码: <input type="password" name="password"/> <br>
    手机号: <input type="text" id="phone">
    <button id="sendMSG">发送</button>
    <br>
    验证码: <input type="text" id="code"> <span id="msg"></span> <br>
    <input type="submit" id="subBtn" value="登录" disabled>
</form>
<script>


    var timer;

    function countDown() {
        var num = parseInt($("#sendMSG").text());
        num--;
        if (num == 0) {
            //1 设置text内容为发送
            $("#sendMSG").text("发送");
            //2 设置按钮为可用
            $("#sendMSG").removeAttr("disabled");
            //3 清除倒计时
            clearTimeout(timer);
        } else {
            $("#sendMSG").text(num);
        }
    }

    $(function () {
        $("#sendMSG").click(function () {
            // 仅是通知服务器发送验证码断续,需求获取服务器响应结果
            //1 通过后台发送短信
            $.post("/sys/sendMsg/"+$("#phone").val())
            //2 设置60秒禁用// 设置禁用
            $(this).text(60).attr("disabled","disabled");
            timer = setInterval(countDown, 1000);
        })


        $("#code").change(function () {
            $.ajax({
                url:"/sys/checkCode",
                type:"post",
                data:"code="+$(this).val(),
                success:function (result) {
                    // alert(result)
                    if (result==1) {
                        //验证成功
                        $("#subBtn").removeAttr("disabled");
                        $("#msg").text("").css("color","red");
                    }else{
                        $("#subBtn").attr("disabled","disabled");
                        $("#msg").text("验证码错误").css("color","red");
                        $(this).val("");
                    }
                }
            })
        })
    })
</script>
</body>
</html>
